<template>
  <Drawer
    v-model:open="open"
    v-bind="$attrs"
    placement="right"
    :footer-style="{ textAlign: 'right' }"
    destroy-on-close
  >
    <!-- <template #extra>
      <Button @click="open = false">关闭</Button>
    </template> -->
    <div class="content">
      <div class="left">
        <div class="left_title">
          <div>业务系统分组配置</div>
          <div class="left_btn">
            <Button :icon="h(PlusCircleOutlined)" type="link" @click="onAdd" />
            <Button :icon="h(SyncOutlined)" type="link" @click="onRefresh" />
            <!-- <Button
              :icon="h(DeleteOutlined)"
              type="link"
              @click="onDelete"
              :disabled="!_selectedKeys.length"
            /> -->
          </div>
        </div>
        <div class="left_content">
          <Tree
            :tree-data="groupOptions"
            defaultExpandAll
            v-model:selectedKeys="_selectedKeys"
            :fieldNames="{
              children: 'children',
              title: 'groupName',
              key: 'groupId',
            }"
          >
          </Tree>
        </div>
      </div>

      <div class="right">
        <Transfer
          v-model:target-keys="targetKeys"
          v-model:selectedKeys="selectedKeys"
          :data-source="hostList"
          show-search
          :selectAllLabels="[
            `业务系统列表 ${selectedKeys.length} / ${hostList.length}`,
            `已选择 ${targetKeys.length} 项`,
          ]"
          :list-style="{
            width: '100%',
            height: '100%',
          }"
          :rowKey="(record) => record.bizHostId"
          :operations="['添加', '移除']"
          :render="(item) => `${item.hostName}-${item.hostAddress}`"
        ></Transfer>
      </div>
    </div>
    <template #footer>
      <Space :size="8">
        <Button style="margin-right: 8px" @click="open = false">取消</Button>
        <Button type="primary" @click="onSubmit">保存</Button>
      </Space>
    </template>
  </Drawer>
  <FormModal :columns="_item"></FormModal>
</template>

<script setup lang="ts">
import { computed, h, ref, watch } from 'vue';
import {
  DeleteOutlined,
  PlusCircleOutlined,
  SyncOutlined,
} from '@ant-design/icons-vue';
import { useFormModal } from '@boeyo/hooks';
import { listToOption } from '@boeyo/shared';
import { BoFormProps } from '@boeyo/ui';
import {
  Button,
  Drawer,
  Modal,
  Space,
  Transfer,
  Tree,
  message,
} from 'ant-design-vue';
import {
  groupSelectList,
  groupUpdate,
  queryBizHostByGroup,
  selectList,
} from './api';

const { FormModal, open: openFrom } = useFormModal({
  size: 'small',
  // column: 1,
});
const groupOptions = ref([]);
const getInfo = async () => {
  const group = await groupSelectList();
  groupOptions.value = group.data;
  _selectedKeys.value = [group.data[0]?.groupId];
  const list = await selectList();
  hostList.value = list.data;
};
getInfo();
const selectedKeys = ref([]);
const targetKeys = ref<string[]>([]);

const hostList = ref([]);

const open = defineModel('visible', {
  type: Boolean,
  default: false,
});

const _selectedKeys = ref([]);

const onAdd = () => {
  openFrom({
    title: '新增',
    hideFooter: true,
    request: async (params: any) => {},
    defaultValue: {
      status: '1',
    },
  });
};

const onRefresh = () => {};

const onDelete = () => {
  Modal.confirm({
    title: '系统提示',
    content: `确认要删除当前选中项数据吗？`,
    onOk: async () => {
      // selectKeys.value.join()
      // tableRef.value.refresh();
      message.success('操作成功');
    },
  });
};
const _item = computed<BoFormProps['columns']>(() => [
  {
    title: '分组名称',
    valueType: 'input',
    dataIndex: 'name',
    fieldProps: {
      placeholder: '请输入分组名称',
    },
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入分组名称',
          trigger: 'blur',
        },
      ],
    },
  },
]);
watch(
  () => _selectedKeys.value,
  async (val) => {
    if (!val.length) return;

    const [groupId] = val;
    const result = await queryBizHostByGroup(groupId);
    targetKeys.value = result.data;
  },
  { immediate: true, deep: true },
);

const onSubmit = async () => {
  // groupId
  // groupUpdate
};
</script>

<style scoped lang="scss">
.content {
  height: 100%;
  display: flex;
  .left {
    flex: 1;
    margin-right: 24px;
    border: 1px solid #fff;
    border-radius: 8px;
    &_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      border-bottom: 1px solid #fff;
    }
    &_btn {
      display: flex;
    }
    &_content {
      padding: 12px;
    }
  }
  .right {
    flex: 2.4;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 12px;
    :deep(.ant-transfer) {
      height: 100%;
    }
  }
}
</style>
